<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录</title>
    <script src="/assets/tailwind.js"></script>
    <link href="/assets/fontawesome-free-6.7.2-web/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .shadow-card {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .tab-active {
                @apply border-primary text-primary;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-all-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- 手机访问本网站 -->
        <div class="bg-white rounded-xl shadow-card p-6 mb-8">
            <h3 class="text-xl font-bold mb-4">手机访问本网站</h3>
            <div class="qrcode-container">
                <img src="{{ qrcode_base64 }}" alt="访问网站的QR码" class="max-w-full h-auto border border-gray-300 rounded-md w-48 mx-auto" title="{{ qr_url }}">
            </div>
        </div>
        <!-- 新增：文件下载区域 -->
        <div class="bg-white rounded-xl shadow-card p-6 mb-8">
            <h3 class="text-xl font-bold mb-4">热点文件下载</h3>
            <div class="qrcode-container">
                <img src="{{ hotspot_qr }}" alt="访问网站的QR码" class="max-w-full h-auto border border-gray-300 rounded-md w-48 mx-auto" title="{{ hotspot_url }}">
            </div> 
        </div>
        <!-- 消息提示区域 -->
        <div id="messages" class="mb-6 hidden">
            <ul class="divide-y divide-gray-200 rounded-lg bg-white shadow-sm">
                <!-- 消息将通过JavaScript动态添加 -->
                {% for message in messages %}
                <li>
                    <span><strong>{{ message }}</strong></span>
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- 登录卡片 -->
        <div class="bg-white rounded-xl shadow-card p-8 transform transition-all duration-300 hover:shadow-lg">
            <form id="login-form" method="post" class="space-y-6">
                <fieldset class="border border-gray-200 rounded-lg p-6">
                    <legend class="px-2 text-lg font-semibold text-gray-900">用户登录</legend>
                    
                    <div class="mb-4">
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <input type="text" id="username" name="username" value="configer" 
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all-300"
                            placeholder="请输入用户名">
                    </div>
                    
                    <div class="mb-4">
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <input type="password" id="password" name="password" value="hunter42" 
                            class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all-300"
                            placeholder="请输入密码">
                        <button type="button" id="toggle-password" class="mt-2 text-sm text-primary hover:text-primary/80">
                            显示密码
                        </button>
                    </div>
                </fieldset>
                
                <input type="submit" value="登录" 
                    class="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300 flex items-center justify-center shadow-md hover:shadow-lg">
                
                <!-- 隐藏的next参数 -->
                {% if let Some(next) = next %}
                <input type="hidden" name="next" value="{{next}}" />
                {% endif %}

            </form>
        </div>

        <div class="mt-6 text-center text-sm text-gray-500">
            <p>没有账户? <a href="mailto:goodput3@qq.com" class="font-medium text-primary hover:text-primary/80">联系管理员</a></p>
        </div>
    </div>

    <script>
        // 切换密码可见性
        document.getElementById('toggle-password').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                this.textContent = '隐藏密码';
            } else {
                passwordInput.type = 'password';
                this.textContent = '显示密码';
            }
        });

        // 登录表单提交
        document.getElementById('login-form').addEventListener('submit', function(e) {
           
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 验证表单
            const errors = [];
            if (!username) errors.push('用户名不能为空');
            if (!password) errors.push('密码不能为空');
            
            if (errors.length > 0) {
                showMessages(errors, 'error');
                return;
            }
           
            setTimeout(() => {
                showMessages(['表单验证成功，正在进入系统...'], 'success');
            }, 1000);
        });

        // 显示消息
        function showMessages(messages, type) {
            const messagesContainer = document.getElementById('messages');
            const messagesList = document.querySelector('#messages ul');
            
            messages.forEach(message => {
                const li = document.createElement('li');
                li.className = 'px-4 py-3';
                
                if (type === 'error') {
                    li.className += ' bg-danger/10 text-danger';
                    li.innerHTML = `<span><strong><i class="fa fa-exclamation-circle mr-2"></i>${message}</strong></span>`;
                } else {
                    li.className += ' bg-success/10 text-success';
                    li.innerHTML = `<span><strong><i class="fa fa-check-circle mr-2"></i>${message}</strong></span>`;
                }
                
                messagesList.appendChild(li);
            });
            
            messagesContainer.classList.remove('hidden');
            
            if (type === 'error') {
                setTimeout(() => {
                    messagesContainer.classList.add('hidden');
                    messagesList.innerHTML = '';
                }, 3000);
            }
        }
    </script>
</body>
</html>
